<template>
  <div ref="refChart" :style="{ height: kH6 * 2 + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'
import {getComplexJson} from '../../api'

export default {
  name: 'C6',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartFive;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData1: [],
      allData2: [],
      allData3: [],
      allData4: [],
      kH6: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kH6 = Math.round(this.screenHeight * 0.46)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    // this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kH6 = Math.round(this.screenHeight * 0.46);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      var myChart = this.$echarts.init(this.$refs.refChart, theme, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var initOption;
      setTimeout(function () {
        initOption = {
          title: {
            text: '金融类别授信笔数统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            right: '5%',
            top: '5%'
          },
          grid: {
            left: '1%',
            right: '10%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: [
              '中国银行',
              '工商银行',
              '建设银行',
              '农业银行',
              '交通银行',
              '光大银行',
              '汉口银行',
              '南京银行',
              '天津银行',
              '北京银行',
              '上海银行',
              '成都银行',

              '重庆银行',
              '西安银行',
              '招商银行',
              '浦发银行',
              '兴业银行'
            ]
          },
          series: [
            {
              name: '授信总笔数',
              type: 'bar',
              data: [1820, 2348, 2903, 1470, 1344, 2302, 1932, 2343, 3100, 1594, 1141, 1818, 2903, 1470, 1344, 2302, 1932]
            },
            {
              name: '发债总笔数',
              type: 'bar',
              data: [1932, 2343, 3100, 1594, 1141, 1818, 1820, 2348, 2903, 1470, 1344, 2302, 1932, 2343, 3100, 1594, 1141, 1818]
            }
          ]
        };
        myChart.setOption(initOption);
      });
      if (initOption && typeof initOption === 'object') {
        myChart.setOption(initOption);
      }
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 30);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
